<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

    <style type="text/css">
        table
        {
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
            width: 700px;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>
</head>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<body>
<form method="post" action="FindUserServlet" enctype="multipart/form-data">
    <div style="height:100px;"></div>
    <div class="city-nav-header">
        <div class="city-nav-list">
            <a href="#">
                <img src="images/icon-001.png" alt="">商品分类
            </a>
            <div class="city-nav-left">
                <dl>
                    <dd>
                        <a href="ProductList">
                            <img src="images/icon-003.png" alt="">CPU
                        </a>
                        <ul class="city-nav-casket">
                            <li style="border-right: none;padding-right: 0;">
                                <a href="#" style="color:#666">英特尔：</a>
                            </li>
                            <li>
                                <a href="#">酷睿i3</a>
                            </li>
                            <li>
                                <a href="#">酷睿i5</a>
                            </li>
                            <li>
                                <a href="#">酷睿i7</a>
                            </li>
                            <li>
                                <a href="#">酷睿i9</a>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                    </dd>
                    <dd>
                        <a href="ProductList">
                            <img src="images/icon-003.png" alt="">显卡
                        </a>
                        <ul class="city-nav-casket">

                            <li>
                                <a href="#">AMD</a>
                            </li>
                            <li>
                                <a href="#">NVDIA</a>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                    </dd>
                    <dd>
                        <a href="ProductList">
                            <img src="images/icon-003.png" alt="">内存
                        </a>
                        <ul class="city-nav-casket">
                            <li style="border-right: none;padding-right: 0;">
                                <a href="#" style="color:#666">1-99元</a>
                            </li>
                            <li>
                                <a href="#">联想</a>
                            </li>
                            <li>
                                <a href="#">百事达</a>
                            </li>
                            <li>
                                <a href="#">金士顿</a>
                            </li>
                            <div class="clearfix"></div>
                            <li style="border-right: none;padding-right: 0;">
                                <a href="#" style="color:#666">100-199元：</a>
                            </li>
                            <li>
                                <a href="#">金士顿</a>
                            </li>
                            <li>
                                <a href="#">联想</a>
                            </li>
                            <li>
                                <a href="#">光威</a>
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="city-nav-item">
            <a href="showcart.jsp">
                <i></i>
                购物车
            </a>
            <a href="FindUserServlet?id=${userOrAdmin.id}&username=${userOrAdmin.username}" style="color: red">
                <c:choose>
                <c:when test="${userOrAdmin !=null}">
                用户：${userOrAdmin.username}
                    <a href="#" style="color:#08acee">←点击修改个人信息</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="UserLogoutServlet" style="color: red">登出</a>
                </c:when>
                <c:otherwise>
                <a href="login.jsp">登陆</a>
                </c:otherwise>
                </c:choose>
        </div>
    </div>
</form>
<div class="city-slide">
    <div class="hd city-slide-header">
        <a class="prev" href="javascript:void(0)"></a>
        <a class="next" href="javascript:void(0)"></a>
    </div>
    <div class="bd city-slide-body">
        <ul>
            <li style="background:gray">
                <a href="#">
                    <img src="images/显卡.jpg" alt="" style="width: 770px;height: 410px;">
                </a>
            </li>
            <li style="background:#0f2049">
                <a href="#">
                    <img src="images/内存.jpg" alt="" style="width: 770px;height: 410px;">
                </a>
            </li>
            <li style="background:#d3ebfb">
                <a href="#">
                    <img src="images/显卡1.jpg" alt="" style="width: 770px;height: 410px;">
                </a>
            </li>
            <li style="background:#7094fc">
                <a href="#">
                    <img src="images/cpu.jpg" alt="" style="width: 770px;height: 410px;">
                </a>
            </li>
            <li style="background:gray">
                <a href="#">
                    <img src="images/英特尔.jpg" alt="" style="width: 770px;height: 410px;">
                </a>
            </li>
        </ul>
    </div>
</div>

<div style="margin-top: 80px;text-align: center">
    <table border="1px" align="center">
        <tr style="width: 80px;height: 50px;;margin: 0;font-weight: bolder">
            <td>编号</td>
            <td>CPU型号</td>
            <td>价格</td>
            <td>描述</td>
            <td>示例图</td>
            <td>硬件类型</td>
            <c:choose>
                <c:when test="${userOrAdmin!=null}">
                    <td>添加购物车</td>
                </c:when>
                <c:otherwise>

                </c:otherwise>
            </c:choose>
        </tr>
        <c:forEach items="${Product.list}" var="p">

            <tr>
                <td>${p.id}</td>
                <td>${p.name}</td>
                <td>${p.price}</td>
                <td>${p.description}</td>
                <td><img src="./upload/${p.img}" alt="" style="width: 50px;height: 50px;"></td>
                <td>${p.ptype}</td>
                <c:choose>
                    <c:when test="${userOrAdmin!=null}">
                        <td><a href="CartServlet?pid=${p.id}" style="color: red" id="cart">Add to Cart</a></td>
                    </c:when>
                    <c:otherwise>

                    </c:otherwise>
                </c:choose>
            </tr>
        </c:forEach>

        <c:choose>
            <c:when test="${userOrAdmin!=null}">
        <tr>
            <td colspan="2"><a href="ProductList?pageNum=${Product.prePageNum}">上一页</a></td>
            <td colspan="3"><a href="ProductList?pageNum=${Product.pageNum}">${Product.pageNum}</td>
            <td colspan="2"><a href="ProductList?pageNum=${Product.nextPageNum}">下一页</a></td>
        </tr>
            </c:when>
            <c:otherwise>
                <tr>
                    <td colspan="2"><a href="ProductList?pageNum=${Product.prePageNum}">上一页</a></td>
                    <td colspan="2"><a href="ProductList?pageNum=${Product.pageNum}">${Product.pageNum}</td>
                    <td colspan="2"><a href="ProductList?pageNum=${Product.nextPageNum}">下一页</a></td>
                </tr>
            </c:otherwise>
        </c:choose>
    </table>
</div>
<script type="text/javascript">
    jQuery(".city-nav-list").slide({
        type: "menu",
        titCell: "dd",
        targetCell: "ul",
        delayTime: 0,
        defaultPlay: false,
        returnDefault: true
    });

    jQuery(".city-slide").slide({
        mainCell: ".bd ul",
        effect: "fold",
        autoPlay: true,
        delayTime: 800
    });
</script>
</body>
</html>
